<template>
	<view class="body">
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>我的</text>
			</view>
			<view class="head_mid">
				实名认证
			</view>
			<view class="head_left">

			</view>
		</view>
		<view class="padding-box">
			<view class="main" v-if="status==1||status==2">
				<view class="input-item">
					<text>姓名</text>
					<text>{{real_name}}</text>
				</view>
				<view class="input-item">
					<text>证件号码</text>
					<text>{{id_no}}</text>

				</view>
				<view class="upload-item">
					<text>上传身份照片</text>
					<view class="upload-item-main">
						<view class="upload-img-item">
							<image class="selected-img" v-if="id_frount!=''" :src="id_frount"></image>
							<view class="notSelect" v-else>
								<image src="../../../static/wode/add.png"></image>
								<view>身份证正面</view>
							</view>
						</view>
						<view class="upload-img-item">
							<image class="selected-img" v-if="id_back!=''" :src="id_back"></image>
							<view class="notSelect" v-else>
								<image src="../../../static/wode/add.png"></image>
								<view>身份证反面</view>
							</view>
						</view>
					</view>
					<view class="tip">
						<text class="tip-red">*</text>
						<text>上传证件必须清晰可见</text>
					</view>
				</view>
				<view class="upload-item">
					<text>上传手持身份证照片</text>
					<view class="upload-item-main">
						<image class="example" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.3Alcx9w97kyl408ac679748af6201f94b042a695aa81.png"></image>
						<view class="upload-img-item">
							<image class="selected-img" v-if="id_onhand!=''" :src="id_onhand"></image>
							<view class="notSelect" v-else>
								<image src="../../../static/wode/add.png"></image>
								<view>手持照</view>
							</view>
						</view>
					</view>
					<view class="tip">
						<text class="tip-red">*</text>
						<text>请确认照片中身份证信息清晰</text>
					</view>
				</view>
			</view>
			<view class="main" v-else>
				<view class="input-item">
					<text>姓名</text>
					<input v-model="real_name" placeholder="请输入你的姓名" type="text">
				</view>
				<view class="input-item">
					<text>证件号码</text>
					<input v-model="id_no" placeholder="请输入你的证件号码" type="text">
				</view>
				<view class="upload-item">
					<text>上传身份照片</text>
					<view class="upload-item-main">
						<view class="upload-img-item" @tap="gettoken('card_front')">
							<image class="selected-img" v-if="id_frount!=''" :src="id_frount"></image>
							<view class="notSelect" v-else>
								<image src="../../../static/wode/add.png"></image>
								<view>身份证正面</view>
							</view>
						</view>
						<view class="upload-img-item" @tap="gettoken('card_back')">
							<image class="selected-img" v-if="id_back!=''" :src="id_back"></image>
							<view class="notSelect" v-else>
								<image src="../../../static/wode/add.png"></image>
								<view>身份证反面</view>
							</view>
						</view>
					</view>
					<view class="tip">
						<text class="tip-red">*</text>
						<text>上传证件必须清晰可见</text>
					</view>
				</view>
				<view class="upload-item">
					<text>上传手持身份证照片</text>
					<view class="upload-item-main">
						<image class="example" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.3Alcx9w97kyl408ac679748af6201f94b042a695aa81.png"></image>
						<view class="upload-img-item" @tap="gettoken('card_onhand')">
							<image class="selected-img" v-if="id_onhand!=''" :src="id_onhand"></image>
							<view class="notSelect" v-else>
								<image src="../../../static/wode/add.png"></image>
								<view>手持照</view>
							</view>
						</view>
					</view>
					<view class="tip">
						<text class="tip-red">*</text>
						<text>请确认照片中身份证信息清晰</text>
					</view>
				</view>
			</view>
		</view>

		<view class="ask-and-answer">
			<view class="ask-item">
				<image src="../../../static/wode/askImage.png"></image>
				<view>
					<text>照片仅供后台审核使用，绝不对外展示</text>
				</view>
			</view>
			<view class="ask-item ask-item-marginTop">
				<image src="../../../static/wode/answerImage.png"></image>
				<view>
					<text>为什么需要实名认证？如何保护隐私？</text>
				</view>
			</view>
			<view class="answer">Q陌是一款跨境社交小程序，有很多国外的用户，需要委托境外的身份认证机构进行认证。国内实名认证也会通过官方认证库进行比对认证，删除有犯罪行为的人群，保证平台的安全性和真实性。您的身份信息仅供用于实名认证，不会被任何人看到，易Q陌平台会保障您的信息安全。</view>
		</view>
		<view class="bottom-main">
			<view class="btn" v-if="noset==false" @tap="getSubmitData">提交审核</view>
			<view class="btn1 btn" v-else>提交审核</view>
		</view>
	</view>
</template>

<script>
	import qiniu from "../../../common/qiniuUploader.js"

	export default {
		data() {
			return {
				realStatus: '',
				real_name: '',
				id_no: '',
				id_frount: '',
				id_back: '',
				id_onhand: '',
				noset: false,
				status: '',
				statusId:'',
			};
		},
		onLoad(option) {
			this.realStatus = option.realStatus;
			if (this.realStatus) {
				this.showMyInfo();
			}
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			showMyInfo() {
				var data = {
					user_id: uni.getStorageSync('user_id'),
				}
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userIdentity',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						console.log(res, '实名信息');
						if (res.data.data.length != 0) {
							me.real_name = res.data.data[0].user_name;
							me.id_no = res.data.data[0].id_card;
							me.id_frount = res.data.data[0].id_frount;
							me.id_back = res.data.data[0].id_back;
							me.id_onhand = res.data.data[0].id_onhand;
							me.status = res.data.data[0].status
							me.statusId=res.data.data[0].id
							if (res.data.data[0].status == 2) {
								uni.showToast({
									title: '等待审核中',
									icon: 'none'
								})
								me.noset = true;
							} else if (res.data.data[0].status == 3) {
								uni.showToast({
									title: '认证被拒绝，请修改后重新提交',
									icon: 'none'
								})
								me.noset = false;
							} else if (res.data.data[0].status == 1) {
								me.noset = true;
							}
						}

					}
				})
			},
			// #ifdef APP-PLUS
			gettoken(type) {
				this.appselectImg(type)
			},
			// #endif
			// #ifdef MP-WEIXIN
			gettoken(type) {
				var me = this;
				var data = {
					key: null,
				}
				this.myAjaxNewPost({
					model: 'push',
					controllerName: 'upload',
					actionName: 'getToken',
					data: data,
					successBack: function(res) {

						me.token = res.data.data
						console.log(res)
						console.log(me.token)
						if (me.token != '') {
							me.selectImg(type)
						}

					}
				})
			},
			// #endif
			appselectImg(type) {
				var me = this;
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					itemColor: '#008AFF',
					success: function(res) {
						var index = res.tapIndex;
						if (index == 1) {
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['album'],
								success: function(res) {
									// me.card_front = res.tempFilePaths[0];
									var filePath = res.tempFilePaths[0];
									uni.uploadFile({
										url: 'http://www.curiousmore.com:8768/eg-api/push/upload/uploadPicture',
										// url: 'http://192.168.101.14:8768/eg-api/push/upload/uploadPicture',
										filePath: filePath,
										name: 'file',
										formData: {
											'user_id': uni.getStorageSync('user_id'),
											'type': 'pic'
										},
										success: function(uploadFileRes) {
											// me.backImgArr.push(JSON.parse(uploadFileRes.data)[0]);
											console.log(JSON.parse(uploadFileRes.data)[0]);
											var imageURL = JSON.parse(uploadFileRes.data)[0];
											if (type == 'card_front') {
												me.id_frount = imageURL
											} else if (type == 'card_back') {
												me.id_back = imageURL
											} else {
												me.id_onhand = imageURL
											}

										},
										fail: function(e) {
											uni.showToast({
												title: '图片上传失败，请重试',
												icon: 'none'
											})
											return;
										}
									});
								}
							});
						} else if (index == 0) {
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['camera'],
								success: function(res) {
									// me.card_front = res.tempFilePaths[0];

									var filePath = res.tempFilePaths[0];
									uni.uploadFile({
										url: 'http://www.curiousmore.com:8768/eg-api/push/upload/uploadPicture',
										// url: 'http://192.168.101.14:8768/eg-api/push/upload/uploadPicture',
										filePath: filePath,
										name: 'file',
										formData: {
											'user_id': uni.getStorageSync('user_id'),
											'type': 'pic'
										},
										success: function(uploadFileRes) {
											// me.backImgArr.push(JSON.parse(uploadFileRes.data)[0]);
											console.log(JSON.parse(uploadFileRes.data)[0]);
											var imageURL = JSON.parse(uploadFileRes.data)[0];
											if (type == 'card_front') {
												me.id_frount = imageURL
											} else if (type == 'card_back') {
												me.id_back = imageURL
											} else {
												me.id_onhand = imageURL
											}

										},
										fail: function(e) {
											uni.showToast({
												title: '图片上传失败，请重试',
												icon: 'none'
											})
											return;
										}
									});
								}
							});
						}
					}
				});
			},
			selectImg(type) {
				// this.initQiniu();
				var me = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(res) {
						// me.card_front = res.tempFilePaths[0];
						var filePath = res.tempFilePaths[0];
						// 交给七牛上传
						if (me.token != '') {
							uni.showLoading({
								title: '上传中'
							})
							qiniu.upload(filePath, (res) => {
								console.log(res.imageURL)
								var imageURL = res.imageURL
								if (type == 'card_front') {
									me.id_frount = imageURL
								} else if (type == 'card_back') {
									me.id_back = imageURL
								} else {
									me.id_onhand = imageURL
								}
								uni.hidLoading()
								console.log('file url is: ' + res.fileUrl);
							}, (error) => {
								console.log('error: ' + error);
								uni.showToast({
									title: '上传失败',
									icon: null
								});
							}, {
								region: 'ECN',
								domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
								key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
								// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
								uptoken: me.token, // 由其他程序生成七牛 uptoken
								// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
								uptokenFunc: function() {
									return '[yourTokenString]';
								}
							}, (res) => {
								console.log('上传进度', res.progress)
								console.log('已经上传的数据长度', res.totalBytesSent)
								console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)

							}, () => {
								// 取消上传
							}, () => {
								// `before` 上传前执行的操作
							}, (err) => {
								// `complete` 上传接受后执行的操作(无论成功还是失败都执行)

							});
						}
					}
				});
			},
			getSubmitData() {
				if (this.real_name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
					})
					return;
				}
				if (this.id_no == '') {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none',
					})
					return;
				}
				if (this.id_frount == '') {
					uni.showToast({
						title: '请上传身份证正面照',
						icon: 'none',
					})
					return;
				}
				if (this.id_back == '') {
					uni.showToast({
						title: '请上传身份证反面照',
						icon: 'none',
					})
					return;
				}
				if (this.id_onhand == '') {
					uni.showToast({
						title: '请上传手持身份证照',
						icon: 'none',
					})
					return;
				}
				// this.allin = true;
				var data = {
					user_id: uni.getStorageSync('user_id'), // 用户id
					user_name: this.real_name, // 真实姓名
					id_card: this.id_no, // 身份证号
					id_frount: this.id_frount, // 身份证正面
					id_back: this.id_back, // 身份证背面
					id_onhand: this.id_onhand, // 手持身份证 
				}
				if(this.status==3){
					data.id=this.statusId
					data.status=2
				}
				console.log(data);
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'userIdentity',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res)
						if (res.data.data == 0) {
							uni.navigateBack({
								delta: 1
							})
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							})
						}
					}
				})
			},
		}
	}
</script>
<style scoped>
	.body {
		font-size: 30upx;
	}

	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 162upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
		top: 0;
		box-sizing: border-box;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;
		padding-top: 70upx;
	}

	.head_mid {
		padding-top: 90upx;
	}

	.head_right {
		width: 150upx;
	}
	.padding-box{
		padding-top:182upx ;
	}

	.main {
		background: #fff;
	}

	.input-item {
		display: flex;
		align-items: center;
		padding: 0 36upx;
		height: 90upx;
		border-bottom: 1upx solid #F0F0F0;
	}

	.input-item text {
		width: 150upx;
	}

	.upload-item {
		padding: 20upx 40upx;
		border-bottom: 1upx solid #F0F0F0;
	}

	.upload-item-main {
		font-size: 24upx;
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}

	.upload-img-item {
		width: 320upx;
		height: 220upx;
		border-radius: 10upx;
		display: flex;
		align-items: center;
		background: #F5F5F5;
		justify-content: center;
	}

	.selected-img {
		width: 100%;
		height: 100%;
	}

	.notSelect {
		text-align: center;
		color: #D5D8D9;
	}

	.notSelect image {
		width: 72upx;
		height: 72upx;
	}

	.tip {
		font-size: 24upx;
		margin-top: 6upx;
		display: flex;
		align-items: center;
		color: #666666;
	}

	.tip-red {
		color: #FD7675;
		margin-right: 4upx;
	}

	.example {
		width: 320upx;
		height: 220upx;
	}

	.ask-and-answer {
		padding: 20upx 40upx;
		color: #666666;
	}

	.ask-item {
		display: flex;
		align-items: center;
	}

	.ask-item image {
		width: 40upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.ask-item text {
		font-size: 24upx;
	}

	.ask-item-marginTop {
		margin-top: 24upx;
	}

	.answer {
		font-size: 18upx;
		margin-left: 60upx;
		line-height: 40upx;
	}

	.bottom-main {
		width: 640upx;
	}

	.btn {
		margin-left: 24upx;
	}

	.bottom-main .btn1 {
		opacity: 0.5;
	}
</style>
